<template>
	<view class="content" ref="content">
		<PopUp :titles="titles" v-show="isPopUp" @off="off" @getId="getId"/>
		<Head :title="title" @back="back"/>
		<swiper :autoplay="flag" class="swiper" :interval="time" >
			<swiper-item class="swiper-item" v-for="(item,ind) in data" :key="ind">
				<p><img :src="item.bookImg" /></p>
			</swiper-item>
		</swiper>
		<div class="audio" ref='aaa'>
			<div>
				<span @click="toPopUp"><text class="iconfont icon-zhankai"></text></span>
				<span class="iconfont2" @click="prv"><text class="iconfont icon-ai10"></text></span>
				<span v-show="!flag" class="iconfont3" @click="clickaudio"><text class="iconfont icon-bofang"></text></span>
				<span v-show="flag" class="iconfont3" @click="clickaudio"><text class="iconfont icon-zanting"></text></span>
				<span class="iconfont2" @click="nex"><text class="iconfont icon-ai09"></text></span>
				<button class="btn2" :plain="true" open-type="share"><text class="iconfont icon-fenxiang"></text></button>
				<audio  id="audio" :src="audiosrc" autoplay :custom-cache="false" @ended="bindended">
					
				</audio>
			</div>
		</div>
		<div class="lead">
			<div>
				<div><span>课程导读</span><span>收藏</span></div>
				<div>The family was going away(家人要出门了) Look after</div>
				<div><a href="https://baidu.com">查看更多>></a></div>
			</div>
		</div>
		<Bybook v-for="(item) in bybook" :key="item.userId" :item="item"/>
	</view>
</template>

<script>
import Head from '@/components/head/index'
import PopUp from '@/components/popUp/index'
import Bybook from '@/components/bybook/index'
import {getWxxcx,getWxxcxHomeRead,getBybook} from '@/service/modules/aboutUs'
import {getSwiper} from '@/service/index'

	export default {
        components:{Head,PopUp,Bybook},
		data() {
			return {
				sleep:(time,flag)=>{
					return new Promise(resolve=>setTimeout(resolve,time))
				},
				initplay:'',
				title: '',
				data:[],
				flag:true,
				time:2000,
				audiosrc:'',
				ids:[5915,39235,345,100425,3679,3672,100894,100908,100888,624,6148,6074,7513,2868],
				ind:0,
				titles:[],
				isPopUp:false,
				bybook:[]
			}
		},
		onLoad() {

		},
		onShow() {
			
			
		},
		async mounted(){
			let res=await getWxxcxHomeRead()
			if(res.items.length){
				this.titles=res.items.reduce((prv,cur,ind,arr)=>{
					return prv.concat(cur.units)
				},[])
			}
			this.getaudio(this.titles[this.ind].id)
		},
		methods: {
			
			async getaudio(id){
				let res=await getWxxcx(id);
				let res1=await getBybook(this.titles[this.ind].id)
				this.bybook=res1
				console.log(this.bybook,88888888888)
				let audio=wx.createAudioContext("audio")
				this.isPopUp=false
				if(res.name){
					this.title=res.name
					this.data=res.picBooks
					this.audiosrc=res.playUrl
					setTimeout(()=>{
						audio.play()
						this.initplay=this.autoplay(this.data)
					},300)
				}
			},
			async autoplay(data){
					for(let i=0;i<data.length-1;i++){
						if(!this.flag)return;
						if(data[i+1].time-data[i].time){
							this.time=(data[i+1].time-data[i].time)*1000
							await this.sleep(this.time)
							// console.log(this.time,999999999999999)
						}
					}
			},
			clickaudio(){
				this.flag=!this.flag
				if(this.flag){
					this.initplay=this.autoplay(this.data)
					wx.createAudioContext("audio").play()
				}else{
					this.initplay=null
					wx.createAudioContext("audio").pause()
				}
			},
			prv(){
				// this.initplay=null
				// this.initplay=this.autoplay(this.data)
				this.flag=true
				this.ind<=0?this.ind=this.titles.length-1:this.ind--
				this.getaudio(this.titles[this.ind].id)
			},
			nex(){
				// this.initplay=null//解决渲染成层报错 想着先清空
				// this.initplay=this.autoplay(this.data)//再调用还是不行
				this.flag=true
				this.ind>=this.titles.length-1?this.ind=0:this.ind++
				this.getaudio(this.titles[this.ind].id)
			},
			bindended(){
				this.nex()
			},
			toPopUp(){
				this.isPopUp=true
			},
			off(){
				this.isPopUp=false
			},
			getId(id,ind){
				this.ind=ind
				this.getaudio(id)
			},
			back(){
				this.isPopUp=false
				console.log('返回')
			}
		}
	}
</script>

<style scoped lang=scss>
.content{
	background-color:#eee;
}
	.swiper{
		height: 540rpx;
		background-color: #fff;
		.swiper-item{
			p{
				width: 90%;
				margin: 0 auto;
				overflow: hidden;
				img{
					width: 100%;
					height: 540rpx;
				}
			}
		}
	}
	.audio{
		background-color: #fff;
		height: 150rpx;
		margin-top: 30rpx;
		>div{
			height: 150rpx;
			width: 90%;
			margin: 0 auto;
			display: flex;
			justify-content:space-between;
			align-items:center;
			span{
				flex:1;
				text-align: center;
				.iconfont{
					font-size:60rpx;
				}
			}
			.iconfont3{
				.iconfont{
					font-size:100rpx;
					color: rgb(224, 55, 78);
				}
			}
			.iconfont2{
				.iconfont{
					color: rgb(224, 55, 78);
				}
			}
			.btn2{
				flex:1;
				text-align: center;
				background-color:#fff;
				border:none;
				outline:none;
				.iconfont{
					font-size:60rpx;
				}
			}
		}
	}
	.lead{
		background-color: #fff;
		margin-top: 30rpx;
		>div{
			width: 95%;
			margin: 0 auto;
			>div:nth-child(1){
				display:flex;
				justify-content:space-between;
			}
			>div:nth-child(2){
				font-size:26rpx;
			}
			>div:nth-child(3){
				display:flex;
				justify-content:flex-end;
			}
			>div{
				height: 70rpx;
				line-height:70rpx;
				a{
					color:red;
					text-decoration: underline;
				}
			}
		}
	}
</style>
